<style lang="less" scoped>
 @import './index.less';
</style>

<style lang="less">
.popover {
  .context-menus {
    .todos-item {
      padding: 0 30px;
    }
  }
}
</style>

<template>
  <div class="page container home">
    <div class="home-head">
      <v-menu
        :selected-key="activedTabKey"
        :data-source="[
          { path: '/', name: '最热' },
          { path: '/?a', name: '最新' },
          { path: '/?b', name: '本周最热' },
        ]"
      />

      <a-button
        ghost
        size="small"
        type="primary"
        @click="changeHomeSider(!useHomeSider)"
      >
        {{ useHomeSider ? '切换单列模式' : '切换双列模式' }}
      </a-button>
    </div>

    <v-main-layout class="home-body">
      <v-main-layout-content class="home-content">
        <!-- list -->
        <div class="list">
          <v-list-item
            v-for="item in list"
            :key="item.id"
            :data-source="item"
          />
        </div>

        <!-- pagination -->
        <a-pagination
          v-model="current"
          show-less-items
          size="small"
          :total="500"
        />
      </v-main-layout-content>

      <v-main-layout-sider
        :visible="useHomeSider"
        class="home-sider"
      >
        <!-- tags -->
        <div class="home-sider-section">
          <a-card
            :bordered="false"
            title="热门标签"
          >
            <nuxt-link
              slot="extra"
              to="/taglist"
              class="link-secondary"
            >
              查看全部
            </nuxt-link>

            <v-tags :data-source="tags" />
          </a-card>
        </div>

        <!-- slogan -->
        <div class="home-sider-section">
          <div class="slogan">
            <img src="~/assets/images/default.png" alt="">
          </div>
        </div>

        <div class="home-sider-section">
          <v-social />

          <v-subnav />

          <div class="home-sider-base">
            <p>电话：{{ baseInfo.telphone }}</p>
            <p>邮箱：{{ baseInfo.email }}</p>
            <p>地址：{{ baseInfo.address }}</p>
            <p>&copy; {{ baseInfo.year }} {{ baseInfo.address }}</p>
            <p>ICP备案号：{{ baseInfo.icp }}</p>
          </div>
        </div>
      </v-main-layout-sider>
    </v-main-layout>

    <a-modal
      v-model="visible.modal"
      centered
      ok-text="否"
      cancel-text="是"
      :width="315"
      :closable="false"
      :ok-button-props="{ props: { type: 'secondary' } }"
      :cancel-button-props="{ props: { type: 'primary' } }"
      @ok="onHideModal"
      @cancel="onHideModal"
    >
      是否接收邮件提醒？
    </a-modal>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import Tags from '~/components/tags'
import Menu from '~/components/menu'
import Social from '~/components/social'
import Subnav from '~/components/subnav'
import ListItem from '~/components/list-item'
import MainLayout from '~/components/main-layout'
import MainLayoutSider from '~/components/main-layout/sider'
import MainLayoutContent from '~/components/main-layout/content'

const thumb = require('~/assets/images/default.png')

const tags = [
  '张三',
  '里斯',
  '再加吃水饺',
  '王武',
  '初八',
  '大年三十',
  '再吃小馄饨',
  '寒冬',
  '腊月',
  '牛肉粉丝汤',
  '龙骨',
  '红烧牛腩',
  '赵六',
  '孙琦',
  '清炒西兰花',
]

export default {
  middleware: ['test'],

  components: {
    'v-tags': Tags,
    'v-menu': Menu,
    'v-social': Social,
    'v-subnav': Subnav,
    'v-list-item': ListItem,
    'v-main-layout': MainLayout,
    'v-main-layout-sider': MainLayoutSider,
    'v-main-layout-content': MainLayoutContent,
  },

  data () {
    return {
      tags,
      current: 1,
      visible: {
        modal: false,
      },
      list: [
        { id: '0', thumb, tags: tags.slice(0, 5), title: '北京小伙用AI修复100年前的京城老视频爆火网络' },
        { id: '1', tags: tags.slice(0, 5), title: '7天完成，颜色还有不足' },
        { id: '2', thumb, tags: tags.slice(0, 5), title: '北京小伙用AI修复100年前的京城老视频爆火网络' },
        { id: '3', tags: tags.slice(0, 5), title: '7天完成，颜色还有不足' },
        { id: '4', thumb, tags: tags.slice(0, 5), title: '北京小伙用AI修复100年前的京城老视频爆火网络' },
        { id: '5', tags: tags.slice(0, 5), title: '7天完成，颜色还有不足' },
        { id: '6', thumb, tags: tags.slice(0, 5), title: '北京小伙用AI修复100年前的京城老视频爆火网络' },
        { id: '7', tags: tags.slice(0, 5), title: '7天完成，颜色还有不足' },
        { id: '8', thumb, tags: tags.slice(0, 5), title: '北京小伙用AI修复100年前的京城老视频爆火网络' },
        { id: '9', tags: tags.slice(0, 5), title: '7天完成，颜色还有不足' },
        { id: '10', thumb, tags: tags.slice(0, 5), title: '北京小伙用AI修复100年前的京城老视频爆火网络' },
        { id: '11', tags: tags.slice(0, 5), title: '7天完成，颜色还有不足' },
      ],
    }
  },

  computed: {
    ...mapState({
      useHomeSider: ({ config = {} }) => config.useHomeSider,
      baseInfo: ({ config = {} }) => config.baseInfo,

      activedTabKey () {
        return this.$route.fullPath
      },
    }),
  },

  methods: {
    ...mapMutations({
      changeHomeSider: 'config/changeHomeSider',
    }),

    onClickPopMenu (data) {
      console.log(data)
    },

    onShowModal () {
      this.visible.modal = true
    },

    onHideModal () {
      this.visible.modal = false

      this.$toast('您可以在设置中关闭')
    },
  },
}
</script>
